<template>
  <div id="buffer">
    <el-container>
      <el-header class="main-head">
        <el-row type="flex" justify="end">
          <el-button v-if="$store.state.buttons['admin/memory/buffer/list']" type="primary" icon="el-icon-search"
            @click="query">
            刷新
          </el-button>
          <el-button v-if="$store.state.buttons['admin/memory/buffer/clean']" type="success" icon="el-icon-delete"
            @click="clean">
            清空失效缓存
          </el-button>
        </el-row>
      </el-header>
      <el-main class="app-main">
        <el-table :data="result" :height="$store.state.sizes.tableHei" border style="width: 100%" stripe>
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form v-if="!isObj(props.row.value)" label-position="left" inline class="demo-table-expand">
                <el-form-item label="缓存值">
                  <span>{{ props.row.value }}</span>
                </el-form-item>
              </el-form>
              <el-form v-if="isObj(props.row.value)" label-position="left" inline class="demo-table-expand">
                <el-form-item v-for="(val, key, i) in props.row.value" :key="key" :label="key" label-width="180px">
                  <span>{{ val }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column prop="key" label="唯一键" min-width="200" />
          <el-table-column prop="effective" label="是否有效" min-width="100" :formatter="booleanFmt" />
          <el-table-column prop="loseTime" label="失效时间" min-width="180" />
          <el-table-column label="操作" min-width="200" fixed="right">
            <template slot-scope="scope">
              <el-button type="success" size="mini" @click="delay(scope.$index, scope.row)">
                修改有效期
              </el-button>
              <el-button v-if="$store.state.buttons['admin/memory/buffer/delete']" type="danger" size="mini" @click="delate(scope.$index, scope.row)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>
  </div>
</template>

<script>
  import {
    Component,
    Prop,
    Vue
  } from 'vue-property-decorator'

  @Component
  export default class Buffer extends Vue {
    urls = {
      list: 'admin/memory/buffer/list',
      clean: 'admin/memory/buffer/clean',
      delay: 'admin/memory/buffer/delay',
      del: 'admin/memory/buffer/delete'
    }

    result = [];

    query() {
      const that = this
      this.$post(this.urls.list).then(function(response) {
        that.result = []
        if (response) {
          that.result = JSON.parse(JSON.stringify(response))
        }
      })
    }

    clean() {
      const that = this
      this.$post(this.urls.clean).then(function(response) {
        if (response) {
          that.query()
        }
      })
    }

    delay(index, row) {
      const that = this
      this.$prompt('请输入失效时间(yyyy-MM-dd HH:mm:ss)', '修改', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^((\d{2}(([02468][048])|([13579][26]))[\-\/\s]?((((0?[13578])|(1[02]))[\-\/\s]?((0?[1-9])|([1-2][0-9])|(3[01])))|(((0?[469])|(11))[\-\/\s]?((0?[1-9])|([1-2][0-9])|(30)))|(0?2[\-\/\s]?((0?[1-9])|([1-2][0-9])))))|(\d{2}(([02468][1235679])|([13579][01345789]))[\-\/\s]?((((0?[13578])|(1[02]))[\-\/\s]?((0?[1-9])|([1-2][0-9])|(3[01])))|(((0?[469])|(11))[\-\/\s]?((0?[1-9])|([1-2][0-9])|(30)))|(0?2[\-\/\s]?((0?[1-9])|(1[0-9])|(2[0-8]))))))(\s((([0-1][0-9])|(2?[0-3]))\:([0-5]?[0-9])((\s)|(\:([0-5]?[0-9])))))?$/,
        inputErrorMessage: '时间格式不正确',
        distinguishCancelAndClose: true,
        showClose: false,
        beforeClose: (action, instance, done) => {
          if (action === 'close') {
            return
          }
          done()
        }
      }).then(({
        value
      }) => {
        that.$post(that.urls.delay, {
          key: row.key,
          loseTime: value
        }).then(function(response) {
          if (response) {
            that.query()
          }
        })
      }).catch(() => {
        this.$showMessage('info', '已取消修改')
      })
    }

    delate(index, row) {
      const that = this
      this.$confirm('确定要删除此条缓存吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'danger'
      }).then(() => {
        this.$post(this.urls.del, row).then(function(response) {
          if (response) {
            that.query()
          }
        })
      }).catch(() => {
        this.$showMessage('info', '已取消删除')
      })
    }

    booleanFmt(row, column, cellValue, index) {
      if (cellValue) {
        return '是'
      }
      return '否'
    }

    isObj(data) {
      return typeof data === 'object'
    }

    created() {
      this.query()
      this.$store.commit('getActionPers', 'buffer')
    }

    mounted() {
      // 生命周期 - 挂载完成（可以访问DOM元素）
    }

    beforeCreate() {} // 生命周期 - 创建之前
    beforeMount() {} // 生命周期 - 挂载之前
    beforeUpdate() {} // 生命周期 - 更新之前
    updated() {} // 生命周期 - 更新之后
    beforeDestroy() {} // 生命周期 - 销毁之前
    destroyed() {} // 生命周期 - 销毁完成
    activated() {} // 如果页面有keep-alive缓存功能，这个函数会触发
  }
</script>
<style>
  #buffer {
    padding: 20px 20px 0px 20px;
  }

  .demo-table-expand {
    font-size: 0;
  }

  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
